<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div th:fragment="mySmallChat">
    <div class="small-chat-box fadeInRight animated">

        <div class="heading" draggable="true">
            <small class="chat-date float-right">
                2017.12.12
            </small>
            与 小王 聊天中
        </div>

        <div class="content">

            <div class="left">
                <div class="author-name">
                    小王 <small class="chat-date">
                    10:02 am
                </small>
                </div>
                <div class="chat-message active">
                    在吗？
                </div>

            </div>
            <div class="right">
                <div class="author-name">
                    游客
                    <small class="chat-date">
                        11:24
                    </small>
                </div>
                <div class="chat-message">
                    我不在！
                </div>
            </div>
            <div class="left">
                <div class="author-name">
                    小王
                    <small class="chat-date">
                        08:45
                    </small>
                </div>
                <div class="chat-message active">
                    不在还可以说话
                </div>
            </div>
            <div class="right">
                <div class="author-name">
                    游客
                    <small class="chat-date">
                        11:24
                    </small>
                </div>
                <div class="chat-message">
                    我是游客，所以我不在！
                </div>
            </div>
            <div class="left">
                <div class="author-name">
                    小王
                    <small class="chat-date">
                        08:45
                    </small>
                </div>
                <div class="chat-message active">
                    好吧
                </div>
            </div>


        </div>
        <div class="form-chat">
            <div class="input-group input-group-sm">
                <input type="text" class="form-control">
                <span class="input-group-btn">
                        <button class="btn btn-primary" type="button">
                            发送
                        </button>
                    </span>
            </div>
        </div>

    </div>
    <div id="small-chat">

        <span class="badge badge-warning float-right">5</span>
        <a class="open-small-chat" href="">
            <i class="fa fa-comments"></i>

        </a>
    </div>
</div>
</body>
</html>